<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view />
    </transition>
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script>
export default {
  data: () => ({
    transitionName: "",
  }),
  created() {
    this.whereami();
    let return_msg;
    try {
      return_msg = JSON.parse(window.localStorage.getItem("user_token"));
    } catch (e) {
      console.log(e);
      return_msg = {
        pay_type: { wx: "", zfb: "" },
        sex: 0,
        head_photo: "",
        _id: "",
        username: "",
        phone: "",
        __v: 0,
      };
    }
    this.$store.commit("setUserPayTypeWX", return_msg.pay_type.wx);
    this.$store.commit("setUserPayTypeZFB", return_msg.pay_type.zfb);
    this.$store.commit("setUserName", return_msg.username);
    this.$store.commit("setUserSex", return_msg.sex);
    this.$store.commit("setUserHeadPhoto", return_msg.head_photo);
    this.$store.commit("setUserPhone", return_msg.phone);
  },
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      if (to.path !== "/" || from.path !== "/") {
        //如果to索引大于from索引,判断为前进状态,反之则为后退状态
        if (to.meta.index > from.meta.index) {
          //设置动画名称
          this.transitionName = "slide-left";
        } else {
          this.transitionName = "slide-right";
        }
      } else {
        this.transitionName = "";
      }
    },
  },
  methods: {
    // 获取自身位置
    whereami() {
      let that = this;
      console.log("asddfasdfasd记录卡撒旦家里附近阿克苏");
      var options = {
        enableHighAccuracy: true, //是否高精度
        maximumAge: 300000, //五分钟后
        timeout: 15000, //愿意等多长时间
      };
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error, options);
      } else {
        alert("您的浏览器不支持定位");
      }
      function error(e) {
        that.$store.commit("setLocation", {
          lng: 116.869843,
          lat: 38.316076,
          zoom: 15,
          msg: "定位失败 " + e.code + " : " + e.message,
        });
      }
      function success(pos) {
        var msg =
          "在" +
          new Date(pos.timestamp).toLocaleString() +
          "的时候，距离您" +
          pos.coords.accuracy +
          "米的地方，经度" +
          pos.coords.latitude +
          "纬度" +
          pos.coords.longitude +
          " . ";
        that.$store.commit("setLocation", {
          lng: pos.coords.longitude,
          lat: pos.coords.latitude,
          zoom: 15,
          msg,
        });
      }
    },
  },
};
</script>
<style>
html {
  user-select: none;
}
input {
  user-select: text;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
